<template>
  <div>
    <!-- 医院组织-部门 -->
    <div ref="search" class="app-search">
      <el-row>
        <!-- <el-col :span="12"> -->
        <!-- <el-select v-model="value" placeholder="请选择" @change="handleChange">
          <el-option
            v-for="item in hospitalList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          /> -->
        <!-- </el-select> -->
        <!-- </el-col> -->
        <el-col :span="12" align="right" class="addBtnStyle">
          <el-button type="primary" plain @click="handleAdd(true)">+ 增加部门</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="box-show marginTop" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table v-loading="loading" :data="tableData" border :height="innerHeight" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column width="80" />
        <el-table-column prop="deptName" label="名称" :show-overflow-tooltip="true" />
        <!-- <el-table-column prop="pname" label="上级部门" :show-overflow-tooltip="true" /> -->
        <el-table-column prop="contact" label="主管人员" :show-overflow-tooltip="true" />
        <el-table-column prop="cureDept" label="治疗科室" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            {{ row.cureDept === "true" ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="operatingPersonnelName" label="操作员" :show-overflow-tooltip="true" />
        <el-table-column prop="status" label="状态" :show-overflow-tooltip="true" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="handleAdd(true, row,false)">增加子部门</el-button>
            <el-button type="text" @click="handleAdd(true, row,true)">修改</el-button>
            <el-button slot="reference" :loading="buttonLoading" type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <Dialog :title="title" button-text="保存" class="single-column" :loading="loading" :visible="visible" @close="handleAdd(false,{})" @confirm="confirm">
      <AddDept v-if="visible" ref="addDept" :current-id="currentId" :row="currentRow" :pids="pids" :is-edit.sync="isEdit" @success="handleSuccess" />
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
import { labelHeigh } from '@/utils/common.js';
import AddDept from "./addDept";
export default {
  components: {
    AddDept,
    Dialog,
  },
  data() {
    return {
      title: '部门',
      visible: false,
      reveal: false,
      total: 0,
      search: {},
      buttonLoading: false,
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      value: undefined,
      // tableColor,
      innerHeight: null,
      loading: false,
      hospitalList: [],
      tableData: [],
      currentRow: {},
      isEdit: false,
      pids: [],
      currentId: '',
    };
  },
  mounted() {
    // this.getHospital();
    // this.getList();
    // Promise.all([this.getHospital(), this.getList()]);
    this.getHospital().then((res) => {
      if (res.code !== 200) return;
      this.value = this.hospitalList[0].id;
      this.getList();
    });
    this.innerHeight = labelHeigh(this.$refs.search) - 30;
  },
  methods: {
    handleAdd(bool, row, isEdit) {
      this.loading = false;
      this.currentId = "";
      if (!row) this.title = "增加部门";
      if (row && isEdit) this.title = "编辑部门";
      if (row && !isEdit) this.title = "增加子部门";
      if (row && row.id) {
        this.currentId = row.id;
        if (row.allPid) {
          this.pids = row.allPid.split(",");
        } else {
          const list = [];
          list.push(row.id);
          this.pids = list;
        }
        if (this.title === "编辑部门") {
          this.pids.splice(this.pids.length - 1, 1);
        }
      } else {
        this.pids = [];
      }
      this.visible = bool;
      if (row) this.currentRow = JSON.parse(JSON.stringify((row)));
      this.currentRow.hosId = this.value;
      this.isEdit = isEdit;
    },
    handleSuccess() {
      this.loading = false;
      this.visible = false;
      this.getList();
    },
    async handleDelete(row) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      }
      this.buttonLoading = true;
      this.$api['data/dept/delete']({ id: row.id }).then(res => {
        if (res.code !== 200) return this.$message.error(res.msg);
        this.msgSuccess('删除成功');
        this.getList();
      }).finally(() => (this.buttonLoading = false));
    },
    handlePaginationChange(pagination) {
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      this.getList();
    },
    handleAddChild(row) {
      this.visible = true;
      // this.currentRow = row;
    },
    handleChange(value) {
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$api['data/dept/deptTreeList']({
        ...this.queryParams,
        // query: {
        //   hospitalId: this.value,
        // },
        // ? this.value : this.hospitalList[0].id,
        // this.value ? query:{ hospitalId: this.value } : this.hospitalList[0].id,
      }).then(res => {
        if (res.code !== 200) return;
        this.tableData = res.data.result;
        this.total = res.data.total;
      }).finally(() => (this.loading = false));
    },
    getHospital() {
      return this.$api['data/hospital/hospitalList']().then(res => {
        if (res.code !== 200) return;
        this.hospitalList = res.data.result;
        return Promise.resolve(res);
      });
    },
    confirm() {
      this.loading = true;
      this.$refs.addDept.submitForm('ruleForm');
    },
  },
};
</script>
<style lang="scss" scoped>
.colors {
  color: #666666 !important;
}
</style>
